<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>刮刮卡</title>
		
	</head>
	<style type="text/css">
		body{
			overflow: hidden;
		}
		.ggkbox{
			width: 400px;
			height: 100px;
			position: relative;
		}
		.ggkbox .jptext{
			width: 100%;
			text-align: center;
			line-height: 100px;
			font-size: 24px;
			color: #f44;
			position: absolute;
			left: 0;
			top: 0;
		}
		.ggkbox #canvas{
			position: absolute;
			left: 0;
			top: 0;
		}
		
	</style>
	<body>
		<div class="ggkbox">
			<div class="jptext">谢谢惠顾</div>
			<canvas id="canvas" width="400" height="100"></canvas>
		</div>
	</body>
	<script type="text/javascript">
		let canvas = document.querySelector('#canvas')
		let ggkbox = document.querySelector('.ggkbox')
		let jptext = document.querySelector('.jptext')
		let ctx = canvas.getContext('2d')
		ctx.fillStyle = '#666'
		ctx.fillRect(0,0,400,100)
		ctx.font = '24px 微软雅黑'
		ctx.fillStyle = '#fff'
		ctx.fillText('刮刮卡',150,55)
		
		let isDraw = false
		canvas.ontouchstart = ()=>{
			isDraw = true
		}
		canvas.ontouchmove = (e)=>{
			if(isDraw){
				let x = e.changedTouches[0].clientX
				let y =e.changedTouches[0].clientY
				ctx.globalCompositeOperation = 'destination-out'
				ctx.arc(x,y,20,0,2*Math.PI)
				ctx.fill()
			}
		}
		canvas.ontouchend = ()=>{
			isDraw = false
		}
		canvas.onmousedown = ()=>{
			isDraw = true
		}
		canvas.onmousemove=(e)=>{
			if(isDraw){
				let x = e.pageX - ggkbox.offsetLeft
				let y =e.pageY - ggkbox.offsetTop
				ctx.globalCompositeOperation = 'destination-out'
				ctx.arc(x,y,20,0,2*Math.PI)
				ctx.fill()
			}
			
		}
		canvas.onmouseup = ()=>{
			isDraw = false
		}
		
		let arr = [{content:'一等奖',p:0.1},{content:'二等奖',p:0.2},{content:'三等奖',p:0.3}]
		function getjp(arr){
			let random = Math.random()
			for(let i of arr){
				if(random<i.p){
					return i.content
				}
			}
		}
		jptext.innerHTML = getjp(arr)||'谢谢惠顾'
	</script>
</html>
